<style lang="less" scoped>
	.common-table-title {
		height: 18px;
		line-height: 18px;
		.action {
			float: right;
		}
		p {
			width: 300px;
			float: left;
		}
	}
</style>

<template>
	<div>
		<Card>
			<div slot="title" class="common-table-title">
				<p>标题</p>
				<div class="action">
					<Button type="success" size="small" icon="plus-round" @click="openModal">增加</Button>
					<Button type="info" size="small" icon="loop" @click='getData'>刷新</Button>
				</div>
			</div>
			<div class="common-search-box" v-if='searchFields.length>0'>
				<div v-for="(t,i) in searchFields" class='my-input-wrapper' :style="t.style">
					<Input v-if="!t.component||t.component==='Input'" v-model="t.value" :placeholder="'请输入'+t.label"></Input>
					<Select v-if="t.component==='Select'" v-model="t.value" :placeholder="'请输入'+t.label">
						<Option v-for="tt in t.selectList" :value="tt.value" :key='tt.value'>{{ tt.label }}</Option>
					</Select>
					<DatePicker ref='DatePicker' v-if="t.component==='DatePicker'" :type="t.datePickerType" v-model='t.value' :format='t.format' :placeholder="'请输入'+t.label"></DatePicker>
					<InputNumber v-if="t.component==='InputNumber'" :max="t.numberMax||10" :min="t.numberMin||1" v-model="t.value" :placeholder="'请输入'+t.label"></InputNumber>
				</div>
				<Button type="primary" icon="search" :loading="searchLoading" @click='searchData'>搜索</Button>
			</div>
			<Table border class="margin-top-10" :loading="loading" :columns="tableFields" :data="list"></Table>
			<div class="common-page-box">
				<Page style='display: inline-block;' show-sizer show-elevator :page-size="config.pageSize" :total="total" :current="config.currentPage" @on-change="changePage" @on-page-size-change='changePageSize'></Page>
			</div>
		</Card>
	</div>
</template>
<script>
	import util from '@/libs/util.js';
	export default {
		name: 'commonTable',
		components: {},
		data() {
			return {
				config: {
					pageSize: 20,
					currentPage: 2,
					url: "/role/findPage",
					delurl: "/role"
				},
				tableFields: [{
						type: 'index',
						width: 60,
						align: 'center'
					},
					{
						title: 'Name',
						key: 'name'
					},
					{
						title: 'Age',
						key: 'age'
					},
					{
						title: 'Address',
						key: 'address'
					}
				],
				searchFields: [{
					component: "Input",
					value: "",
					label: "姓名"
				}],
				loading: false,
				searchLoading: false,
				list: [],
				total: 0
			};
		},
		//props: ['config','tableFields', 'searchFields'],
		mounted() {
			this.getData();
		},
		watch: {},
		computed: {
			searchFieldsHandle() {
				let obj = {};
				this.searchFields.forEach((t) => {
					obj[t.key] = t.value
				});
				return obj
			},
		},
		methods: {
			getData(opt) {
				this.loading = true;
				this.$ajax({
					url: this.config.url,
					method: 'post',
					data: {
						"fields": {
							"value": ""
						},
						"page_no": this.config.currentPage,
						"page_size": this.config.pageSize,
						"sort_fields": "created_date",
						"sort_type": "DESC"
					},
					success: (res) => {
						this.loading = false;
						this.list = res.data;
						this.total = res.total;
						opt && opt.render && opt.render();
					},
					error: () => {
						this.loading = false;
					}

				});
			},
			searchData() {
				this.searchLoading = true;
				this.getData({
					render: () => {
						this.searchLoading = false;
					}
				});
			},
			deleteData(opt) {
				this.loading = true;
				this.$ajax({
					url: this.config.delurl + '/' + opt.id,
					method: 'delete',
					success: (res) => {
						this.$Message.success('删除成功');
						this.config.currentPage = 1;
						this.getData();
					},
					error: () => {
						this.loading = false;
					}

				});
			},
			openModal() {
				this.$parent.$refs['commonForm'].openModal();
			},
			changePage(currentPage) {
				this.config.currentPage = currentPage;
				this.getData();
			},
			changePageSize(pageSize) {
				this.config.pageSize = pageSize;
			}
		}

	};
</script>